<template>
  <div>
    <van-field
      v-model="data.nickname"
      label="姓名"
      placeholder="请输入姓名"
      :rules="[{ required: true, message: '姓名不能为空' }]"
    />
    <van-field
      v-model="data.tel"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[{ required: true, message: '手机号不能为空' }]"
    />
    <van-field
      v-model="data.provice_city_area"
      is-link
      readonly
      name="area"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <MAP @longitude-li="longitudeLi" @latitude-li="latitudeLi" @addressLi="addressli"></MAP>
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
    </van-popup>
    <van-field
      v-model="data.detail_address"
      label="详细地址"
      placeholder="请输入详细地址"
      :rules="[{ required: true, message: '详细地址不能为空' }]"
    />
    <!-- <van-field
      v-model="data.longitude"
      label="经度"
      placeholder="请输入经度"
      :rules="[{ required: true, message: '经度不能为空' }]"
    />
    <van-field
      v-model="data.latitude"
      label="纬度"
      placeholder="请输入纬度"
      :rules="[{ required: true, message: '纬度不能为空' }]"
    /> -->
    <van-button class="btn" type="primary" @click="onSave">编辑地址</van-button>
    <van-button class="btn" type="warning" @click="confirmDelete">删除地址</van-button>
    
    <van-dialog
      v-model:show="showDeleteDialog"
      title="确认删除"
      message="确定要删除这个地址吗？"
      show-cancel-button
      @confirm="deleteaddress"
      @cancel="showDeleteDialog = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { geteditaddress, getedeleteaddress, getgaiaddress } from '../../request/http';
import { useRoute, useRouter } from 'vue-router';
import { areaList } from '@vant/area-data';
import MAP from '../../components/MapContainer/index.vue';

const route = useRoute();
const router = useRouter();
const { id } = route.params;

const showArea = ref(false);
const showDeleteDialog = ref(false);
const data = ref({});

const onConfirm = ({ selectedOptions }) => {
  showArea.value = false;
  data.value.provice_city_area = selectedOptions.map(item => item.text).join('/');
};

geteditaddress(id as string).then(res => {
  data.value = res.data.data;
});

const longitudeLi = (e) => {
  data.value.longitude = e;
};

const latitudeLi = (e) => {
  data.value.latitude = e;
};

const addressli = (e) => {
  data.value.detail_address = e;
};

// 编辑
const onSave = () => {
  if (!data.value.nickname || !data.value.tel || !data.value.detail_address || !data.value.longitude || !data.value.latitude) {
    console.error('请填写所有必需字段');
    return;
  }

  getgaiaddress(id as string, data.value.nickname, data.value.tel, data.value.provice_city_area, data.value.detail_address, data.value.longitude, data.value.latitude)
    .then(res => {
      router.push('/address');
    })
    .catch(error => {
      console.error('编辑地址失败', error.response ? error.response.data : error);
    });
};

const confirmDelete = () => {
  showDeleteDialog.value = true;
};

const deleteaddress = () => {
  getedeleteaddress(id as string).then(res => {
    router.push('/address');
  });
};
</script>

<style scoped>
.btn {
  width: 100%;
  margin-top: 20px;
}
</style>
